<!-- 抗肿瘤药物使用率 -->
<template>
    <div id="antiTumor"></div>
</template>
<script>
import * as echarts from "echarts";
import { getAntiTumorData } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {};
    },
    mounted() {
        this.setEcharts();
    },
    methods: {
        //设置echarts
        setEcharts() {
            let data1 = [];
            const data = new Array(5).fill(0).map(() => Mock.Random.integer(10, 70));
            data.forEach((item) => {
                data1.push(
                    // parseFloat(item.VALUE1.substring(0, item.VALUE1.length - 1))
                    item
                );
            });
            let antiTumor = echarts.init(document.getElementById("antiTumor"));
            let option = {
                animation: true,
                grid: {
                    top: "7%",
                    bottom: "15%",
                    right: "1%",
                    left: "8%",
                },
                xAxis: {
                    data: [
                        "人民医院",
                        "二院",
                        "中医院",
                        "妇幼保健",
                        "乡镇卫生院",
                    ],
                    axisLine: {
                        show: false, //隐藏X轴轴线
                    },
                    axisTick: {
                        show: false, //隐藏X轴轴线
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(77, 128, 254, 0.05)",
                            width: 2,
                        },
                    },
                    axisLabel: {
                        interval: 0,
                        show: true,
                        margin: 10,
                        fontSize: 16,
                        textStyle: {
                            color: "#65D5FF", //X轴文字颜色
                        },
                    },
                },
                yAxis: [
                    {
                        type: "value",
                        gridIndex: 0,
                        min: 0,
                        max: 10,
                        interval: 2,
                        // splitNumber: 4,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(77, 128, 254, 0.05)",
                                width: 2,
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(77, 128, 254, 0.05)",
                            },
                        },
                        axisLabel: {
                            show: true,
                            margin: 14,
                            fontSize: 16,
                            textStyle: {
                                color: "#65D5FF",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "使用率",
                        type: "bar",
                        barWidth: 16,
                        label: {
                            //图形上的文本标签
                            normal: {
                                show: true,
                                position: "top",
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 16,
                                },
                                formatter: (params) => {
                                    return `${params.value}%`;
                                },
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(146, 225, 255, 1)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(0, 151, 251, 1)",
                                        },
                                    ]
                                ),
                            },
                        },
                        data: data1,
                        z: 10,
                        zlevel: 0,
                    },
                    {
                        // 分隔
                        type: "pictorialBar",
                        itemStyle: {
                            normal: {
                                color: "#0F375F",
                            },
                        },
                        symbolRepeat: "fixed",
                        symbolMargin: 6,
                        symbol: "rect",
                        symbolClip: true,
                        symbolSize: [18, 2],
                        symbolPosition: "start",
                        symbolOffset: [1, 1],
                        data: data1,
                        width: 2,
                        z: 0,
                        zlevel: 1,
                    },
                    {
                        name: "外框",
                        type: "bar",
                        barGap: "-110%", // 设置外框粗细
                        data: [10, 10, 10, 10, 10, 10, 10],
                        barWidth: 16,
                        itemStyle: {
                            normal: {
                                color: "transparent", // 填充色
                                // barBorderRadius: 0, //圆角半径
                                label: {
                                    // 标签显示位置
                                    show: false,
                                    position: "top", // insideTop 或者横向的 insideLeft
                                },
                            },
                        },
                        z: 0,
                    },
                    {
                        name: "",
                        type: "line",
                        smooth: true, //平滑曲线显示
                        showAllSymbol: false, //显示所有图形。
                        symbolSize: 0,
                        lineStyle: {
                            width: 0,
                        },
                        areaStyle: {
                            color: "rgba(0, 151, 251, 0.1)",
                        },
                        data: data1,
                        z: 5,
                    },
                ],
                dataZoom: [
                    {
                        type: "slider",
                        show: false,
                        xAxisIndex: [0],
                        endValue: 4,
                        startValue: 0,
                    },
                ],
            };

            antiTumor.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
#antiTumor {
    width: 100%;
    height: 100%;
    padding-top: 10px;
}
</style>